<template>
  <el-dialog
    :model-value="props.eleTypeVisible"
    title="用电类型选择"
    width="50%"
    :before-close="handleClose"
  >
    <div class="ele-type">
      <fieldset class="ele-type-item1">
        <legend>用电类型:</legend>
        <div>
          <el-table
            highlight-current-row
            :data="eleTypeData"
            @row-click="rowClick"
          >
            <el-table-column prop="name" label="" />
          </el-table>
        </div>
      </fieldset>
      <fieldset class="ele-type-item2">
        <legend>电价:</legend>
        <div>
          <el-table :data="tableData">
            <el-table-column prop="label" label="" />
            <el-table-column prop="value" label="电价" />
          </el-table>
        </div>
      </fieldset>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">返回</el-button>
        <el-button type="primary" @click="handle"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { sElectricityUseTypeList } from "@/api/app.js";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const useApp = useAppStore();
let { currentEleType } = storeToRefs(useApp);

const emit = defineEmits(["is-show"]);
const num = ref(1);
const props = defineProps({
  eleTypeVisible: Boolean,
  position: String,
});
let eleTypeData = ref([]);
const tableData = ref([
  {
    prop: "jian",
    label: "尖时段",
  },
  {
    prop: "feng",
    label: "峰时段",
  },
  {
    prop: "ping",
    label: "平时段",
  },
  {
    prop: "gu",
    label: "谷时段",
  },
  {
    prop: "capacity",
    label: "基本电费(按容量计费)",
  },
  {
    prop: "collectionFund",
    label: "代收基金",
  },
  {
    prop: "demand",
    label: "基本电费(按需量计费)",
  },
]);
const currentData = ref();

//关闭弹窗
const handleClose = () => {
  emit("is-show");
};
//确定弹窗
const handle = () => {
  currentEleType.value[props.position] = currentData.value;
  emit("is-show");
};
onMounted(() => {
  init();
});
const init = async () => {
  await sElectricityUseTypeList()
    .then((res) => {
      eleTypeData.value = res.data;
      matchData(eleTypeData.value[0].price);
    })
    .catch((err) => {
      console.log(err);
    });
};
const matchData = (eleTypeData) => {
  tableData.value.forEach((item) => {
    switch (item.prop) {
      case "jian":
        item.value = eleTypeData.jian;
        break;
      case "feng":
        item.value = eleTypeData.feng;
        break;
      case "ping":
        item.value = eleTypeData.ping;
        break;
      case "gu":
        item.value = eleTypeData.gu;
        break;
      case "capacity":
        item.value = eleTypeData.capacity;
        break;
      case "collectionFund":
        item.value = eleTypeData.collectionFund;
        break;
      case "demand":
        item.value = eleTypeData.demand;
        break;
      default:
        break;
    }
  });
};
const rowClick = (row) => {
  matchData(row.price);
  currentData.value = row;
};
</script>
<style lang="scss" scoped>
.ele-type {
  display: flex;
  .ele-type-item1 {
    width: 390px;
  }
  .ele-type-item2 {
    flex: 1;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .el-button {
    width: 60px;
  }
}
</style>
